<template>
    <div class="wx" :id="containerId"></div>
</template>

<script>
export default {
    name: 'WxLogin',
    props: {
        appid: {
            type: String,
            required: true
        },
        redirectUri: {
            type: String,
            required: true
        },
        scope: {
            type: String,
            default: 'snsapi_login'
        },
        theme: {
            type: String,
            default: 'black',
            validator: value => ['black', 'white'].includes(value)
        },
        containerId: {
            type: String,
            default: 'wx-login-container'
        }
    },
    mounted() {
        // 确保脚本已加载
        this.loadWxLoginScript().then(() => {
            this.initWxLogin();

        });
    },
    methods: {
        loadWxLoginScript() {
            return new Promise((resolve) => {
                // 如果已经加载过，直接返回
                if (window.WxLogin) {
                    resolve();
                    return;
                }
                const script = document.createElement('script');
                script.src = 'https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js';
                script.onload = resolve;
                document.body.appendChild(script);
            });
        },
        initWxLogin() {
            /* eslint-disable no-undef */
            if (typeof WxLogin === 'function') {
                new WxLogin({
                    id: this.containerId,
                    appid: this.appid,
                    scope: this.scope,
                    redirect_uri: encodeURIComponent(this.redirectUri),
                    state: this.generateState(),
                    style: this.theme,
                    href: 'data:text/css;base64,' + btoa(`
            .impowerBox {
                width: 100% !important;
                margin: 0 auto !important;
            }
                .impowerBox .status p{
                  font-size: 3vw !important; /* 15px / 1920px * 100vw */
                max-font-size: 3vw !important;
                }
            .impowerBox .qrcode {
                width: 50vw !important;  /* 200px / 1920px * 100vw */
                height: 50vw !important;
                max-width: 200px !important;
                max-height: 200px !important;
                margin: 2.6042vw auto 0 !important; /* 50px / 1920px * 100vw */
            }
            .impowerBox .title {
                font-size: 5vw !important; /* 20px / 1920px * 100vw */
                max-font-size: 20px !important;
            }
            .impowerBox .info {
                width: 100vw !important;
                font-size: 3vw !important; /* 15px / 1920px * 100vw */
                max-font-size: 3vw !important;
            }
        `)
                });
            }
            this.forceIframeResize(); // 强制调整 iframe 宽度
            /* eslint-enable no-undef */
        },
        forceIframeResize() {
            const interval = setInterval(() => {
                const iframe = document.querySelector(`#${this.containerId} iframe`);
                if (iframe) {
                    iframe.width = "100%";
                    iframe.height = "100%";
                    clearInterval(interval); // 找到后清除定时器
                }
            }, 100);
        },
        generateState() {
            return Math.random().toString(36).substring(2, 15);
        }
    }
}

</script>
<style scoped>
#wx-login-container {
    width: 25vw;
    height: 40vw;
    max-height: 400px;
}
</style>